<template>
	<view class="store-info">
		<block v-if="show">
			<view class="store-info-top">
				<view class="store-info-top-1">
					<image :lazy-load="true" :src="storeInfo.store_logo"></image>
					<text>{{storeInfo.store_name}}</text>
				</view>
				<u-cell-group :border="false">
					<u-cell-item :title="storeInfo.address" :titleStyle="{color: '#141414',fontSize: '28rpx',fontWeight: 'bold'}" hover-class="none" @click="goMap">
						<image :lazy-load="true" 
							src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/storeInfo/icon1.png" slot="icon" 
							style="width: 36rpx; height: 36rpx; margin-right: 25rpx;">
						</image>
					</u-cell-item>
					<u-cell-item :title="storeInfo.phone" :titleStyle="{color: '#141414',fontSize: '28rpx',fontWeight: 'bold'}" @click="makePhoneCall">
						<image :lazy-load="true" 
							src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/storeInfo/icon2.png" slot="icon"
							style="width: 36rpx; height: 36rpx; margin-right: 25rpx;">
						</image>
					</u-cell-item>
				</u-cell-group>
			</view>
			<view class="store-info-bot">
				<u-cell-group :border="false">
					<u-cell-item title="基本信息" :titleStyle="{color: '#141414',fontSize: '36rpx',fontWeight: 'bold'}" hover-class="none" :arrow="false"></u-cell-item>
					<!-- <u-cell-item title="门店类型" :titleStyle="{color: '#4D4D4D',fontSize: '32rpx'}" :arrow="false"
						:value-style="{color: '#141414', fontSize: '32rpx',fontWeight: 'bold'}">
						<block v-if="storeInfo.type==1">普通商家</block>
						<block v-if="storeInfo.type==2">装饰公司</block>
						<block v-if="storeInfo.type==3">定制企业</block>
					</u-cell-item> -->
					<u-cell-item title="门店图片" :titleStyle="{color: '#4D4D4D',fontSize: '32rpx'}" :arrow="false" :use-label-slot="true" class="server-code-box">
						<view slot="label" class="store-imgs">
							<image :lazy-load="true" v-for="(data,index) in storeInfo.store_img" :key="index" :src="data.image" @click="previewStoreImg(data.image)" mode="aspectFill"></image>
						</view>
					</u-cell-item>
					<u-cell-item title="客服微信二维码" :titleStyle="{color: '#4D4D4D',fontSize: '32rpx'}" :arrow="false" :use-label-slot="true" class="server-code-box">
						<view slot="label" class="server-code">
							<image :lazy-load="true" :src="storeInfo.store_service_code || storeInfo.service_code" @click="preview" mode="aspectFit"></image>
							<view class="save" @click="save">保存到手机</view>
						</view>
					</u-cell-item>
					<u-cell-item title="门店简介" :titleStyle="{color: '#4D4D4D',fontSize: '32rpx'}" :arrow="false" :use-label-slot="true" class="server-code-box">
						<view slot="label" class="store-des">{{storeInfo.brief}}</view>
					</u-cell-item>
				</u-cell-group>
			</view>
		</block>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				store_id: '',
				storeInfo: ''
			};
		},
		onLoad(options) {
			if(options.parent_id){
				uni.setStorageSync('parent_id',options.parent_id)
				// 如果用户从分享的小程序卡片点击进来的,设置一个url缓存,登录后返回当前缓存url
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1];
				uni.setStorageSync('newurl',curPage.$page.fullPath)
				this.$u.api.binding_refer({id: options.parent_id}).catch(() => {
					console.log('接口报错：绑定失败')
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '绑定失败'
					// })
				})
			}
			this.store_id = options.store_id
			this.init()
		},
		methods: {
			init(){
				this.$u.api.StoreInfo({
					paramter: 1,
					store_id: this.store_id
				}).then(res => {
					let user_id = uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).user_id:0
					let store_id = uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:1
					this.$u.mpShare = {
						title: res.datas[0].store_data.share_txt,
						path: '/merchant/store-info/store-info?parent_id=' + user_id + '&store_id=' + store_id,
						imageUrl: res.datas[0].store_data.share_images
					}
					this.show = true
					this.storeInfo = res.datas[0]
					uni.setNavigationBarTitle({
						title: res.datas[0].store_name
					})
				})
			},
			makePhoneCall(){
				uni.makePhoneCall({
					phoneNumber: this.storeInfo.phone
				})
			},
			preview(){
				uni.previewImage({
					current: this.storeInfo.store_service_code || this.storeInfo.service_code,
					urls: [this.storeInfo.store_service_code || this.storeInfo.service_code]
				})
			},
			previewStoreImg(data){
				let urls = []
				this.storeInfo.store_img.forEach(item => {
					urls.push(item.image)
				})
				uni.previewImage({
					current: data,
					urls: urls
				})
			},
			save(){
				uni.downloadFile({
					url: this.storeInfo.store_service_code || this.storeInfo.service_code,
					success: (downRes) => {
						console.log(downRes)
						uni.saveImageToPhotosAlbum({
							filePath: downRes.tempFilePath,
							success: (saveRes) => {
								uni.showToast({
									icon: 'none',
									title: '保存成功'
								})
							}
						})
					}
				})
			},
			goMap(){
				if(this.storeInfo.store_id==1){
					uni.navigateTo({
						animationDuration: 500,
						url: '/merchant/store-info/store-map'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F9F9F9;
	}
	.store-info{
		.store-info-top{
			background-color: #FFF;
			.store-info-top-1{
				display: flex;
				align-items: center;
				padding: 50rpx 30rpx;
				image{
					border: solid 2rpx #F5F5F5;
					border-radius: 50%;
					width: 130rpx;
					height: 130rpx;
					margin-right: 35rpx;
				}
				text{
					font-size: 46rpx;
					color: #141414;
					font-weight: bold;
				}
			}
		}
		.store-info-bot{
			margin-top: 30rpx;
			.server-code-box{
				/deep/ .u-cell_title{
					width: 100% !important;
				}
			}
			.server-code{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
				image{
					width: 175rpx;
					height: 175rpx;
				}
				.save{
					width: 210rpx;
					height: 72rpx;
					border: 2rpx solid rgba(20,20,20,1);
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 4rpx;
					color: #141414;
					font-size: 28rpx;
				}
			}
			.store-des{
				color: #141414;
				font-weight: bold;
				line-height: 60rpx;
				font-size: 28rpx;
				margin-top: 20rpx;
			}
			.store-imgs{
				margin-top: 20rpx;
				image{
					width: 215rpx;
					height: 215rpx;
					margin-right: 20rpx;
					&:last-child{
						margin-right: 0;
					}
				}
			}
		}
	}
</style>
